@extends('home.layouts.app')

@section('title','修改联系人')

<!-- 设置token -->
<meta name="csrf-token" content="{{csrf_token()}}">

@push('css')
<!-- 页面独立的 -->
<link rel="stylesheet/less" href="{{URL::asset('assets/css/ContactAdd.less')}}" />
@endpush

@section('content')
<!-- 导航 -->
<header>
    <div class="left">
        <a href="javascript:history.back(-1)">
            <span class="glyphicon glyphicon-menu-left back"></span>
            <span>返回</span>
        </a>
    </div>
    <div class="center">
        修改联系人
    </div>
</header>
<!-- 信息录入 -->
<div class="info">
    <h3 class="title wow fadeInUp">信息录入</h3>

    <p class="desc wow fadeInUp" data-wow-delay="200ms">
        您可在本页录入您的联系信息，录入成功后名片将会出现在首页。
    </p>
</div>

<form class="contact wow fadeInUp" data-wow-delay="300ms" action="{{url('home/contact/editform')}}" method="post">
    @csrf
    <input type="hidden" name="contactid" value="{{$Contact['id']}}">
    <div class="form-group">
        <label for="nickname">姓名</label>
        <input type="text" class="form-control" name="nickname" id="nickname" value="{{$Contact['nickname']}}" placeholder="请输入姓名" required />

    </div>

    <div class="form-group">
        <label for="phone">手机</label>
        <input type="text" class="form-control" name="phone" value="{{$Contact['phone']}}" id="phone" placeholder="请输入手机" required />
    </div>

    <div class="form-group">
        <label for="gender">性别</label>
        <select class="form-control" name="gender">
            <option value="0" {{$Contact['gender'] == 0 ? 'selected' : ''}}>保密</option>
            <option value="1" {{$Contact['gender'] == 1 ? 'selected' : ''}}>男</option>
            <option value="2" {{$Contact['gender'] == 3 ? 'selected' : ''}}>女</option>
        </select>
    </div>

    <div class="form-group">
        <label for="province">省份</label>
        <select class="form-control" name="province" id="province">
            <option>请选择</option>
            @foreach($provinces as $item)
            <option value="{{$item->code}}" {{$Contact['province'] == $item->code ? 'selected' : ''}}>{{$item->name}}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label for="city">市</label>
        <select class="form-control" name="city" id="city">
            <option>请选择</option>
            @foreach($citys as $item)
            <option value="{{$item->code}}" {{$Contact['city'] == $item->code ? 'selected' : ''}}>{{$item->name}}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label for="district">区</label>
        <select class="form-control" name="district" id="district">
            <option>请选择</option>
            @foreach($districts as $item)
            <option value="{{$item->code}}" {{$Contact['district'] == $item->code ? 'selected' : ''}}>{{$item->name}}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label for="type">分类</label>
        <select class="form-control" name="typeid" id="type">
            <option>请选择</option>
            @foreach($TypeList as $item)
            <option value="{{$item->id}}" {{$Contact['typeid'] == $item->id ? 'selected' : ''}}>{{$item->name}}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label for="remark" style="display: block;">备注</label>
        <!-- <input type="text" class="form-control" id="remark" placeholder="请输入备注" /> -->
        <textarea rows="10" class="form-control" name="remark" id="remark" placeholder="请输入备注">{{$Contact['remark']}}</textarea>

    </div>

    <div class="action">
        <button class="btn">提交</button>
    </div>

    <div class="action">
        <button class="btn del" style="background:red;" data-id="{{$Contact['id']}}" type="button">删除</button>
    </div>
</form>
@endsection

@push('script')
<script>
    layui.use(['layer'], function() {

        var layer = layui.layer

        $('.del').click(function(){
            var id = $(this).data('id')

            layer.confirm('确认该联系人？',{
                title:'删除'
            },function(index){

                $.ajax({
                    type:'post',
                    url:`{{url('home/contact/del')}}`,
                    data:{
                        id
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    dataType: 'json',
                    success:function(res)
                    {
                        if(res.code == 1)
                        {
                            layer.msg(res.msg,function(){
                                location.href = `{{'/'}}`
                            })
                        }else{
                            layer.msg(res.msg)
                        }
                    }
                })
                
                layer.close(index)
            })
        })

        $('#province').change(function() {
            let code = $(this).val()

            $.ajax({
                type: 'post',
                url: `{{url('home/user/area')}}`,
                data: {
                    code
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',
                success: function(res) {

                    if (res.code == 0) {
                        return false
                    }

                    let option = ''

                    for (let item of res.data) {
                        option += `<option value="${item.code}">${item.name}</option>`
                    }

                    $('#city').html(option)

                    GetCity(res.data[0].code, '#district')

                }
            })
        })

        $('#city').change(function() {
            let code = $(this).val()

            $.ajax({
                type: 'post',
                url: `{{url('home/user/area')}}`,
                data: {
                    code
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',
                success: function(res) {

                    if (res.code == 0) {
                        return false
                    }

                    let option = ''

                    for (let item of res.data) {
                        option += `<option value="${item.code}">${item.name}</option>`
                    }

                    $('#district').html(option)

                }
            })
        })

        function GetCity(code, element) {
            $.ajax({
                type: 'post',
                url: `{{url('home/user/area')}}`,
                data: {
                    code
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',
                success: function(res) {

                    if (res.code == 0) {
                        return false
                    }

                    let option = ''

                    for (let item of res.data) {
                        option += `<option value="${item.code}">${item.name}</option>`
                    }

                    $(element).html(option)

                }
            })
        }
    })
</script>
@endpush